<template>
  <div style="padding: 10px">
    <!--    功能区-->
    <div style="margin: 10px 0">
      <div><h3 style="text-align: center">表格展示</h3></div>
    </div>
    <!--    搜索区-->
    <div style="margin: 10px 0;">
      <!--搜索用户-->
      <el-input v-model="search" placeholder="输入成员昵称" clearable style="width: 15%" />
      <el-button type="primary" style="margin-left: 5px" @click="search_name">查询</el-button>
      <!--时间搜索-->
      <el-input v-model="searchTime" placeholder="时间:（2023年-1周）" clearable style="width: 18%;padding-left: 40px;" ></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="search_time">查询</el-button>
      <!--分组搜索-->
      <el-select v-model="select" filterable placeholder="组别分类" :remote-method="search_group" style="width: 20%;padding-left: 40px">
        <el-option label="开发组" value="开发组" />
        <el-option label="提高组" value="提高组" />
        <el-option label="学习组" value="学习组" />
        <el-option label="所有组" value="" />
      </el-select>
      <!--搜索返回按钮-->
      <el-button v-if="fanHuiShow" type="primary" @click="fanHui" style="margin-left: 40px;" round> 返 回 </el-button>
    </div>
    <!--    表格-->
    <el-table :data="tableData" stripe size="large" style="width: 100%">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="group" label="组别" />
      <el-table-column prop="year_week" label="时间" />
      <el-table-column prop="bool_work" label="是否完成任务" />
      <el-table-column prop="bool_overwork" label="是否超量完成" />
      <el-table-column prop="grasp" label="知识掌握情况" />
      <el-table-column prop="ask_for_leave" label="本周请假次数" />
      <el-table-column fixed="right" label="操作" style="width: 100px">
        <template #default="scope">
          <el-button size="middle" @click="handleDetail(scope.row.name)" type="primary">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <div style="margin: 10px 0 ">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </div>

  </div>
</template>

<script>


import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

export default {
  name: 'table',
  components: {

  },
  data() {
    return{
      form:{},
      dialogTableVisible: false,
      search:"",
      searchTime:"",
      select:"",
      currentPage: 1,
      pageSize:10,
      total: 0,
      id:0,
      tableData:[],
      fanHuiShow: false,
    }
  },
  methods: {
    // 搜索后返回总数居
    fanHui() {
      // 刷新页面
      window.location.reload();
    },
    // 获取数据 1
    pgload() {
      request.get("/table/get_table",{
        params:{
          url:"/progress",
          limit:this.pageSize, // 初始展示数据 以展示数据大小为准
          offset:this.currentPage,
          order:"id",
          select:"bool_work,bool_overwork,grasp,member_progress(year_week,ask_for_leave),member(name,group)",
        },
      }).then(res => {
        if (res.code == "200") {
          if ("登录"!=sessionStorage.getItem("login")) {
            ElMessage({
              message: '查询成功.',
              type: 'success',
            })
          }
          this.tableData = res.data.reverse();
          // 从1开始给数据排序
          for (let i = 0; i < res.data.length; i++) {
            this.tableData[i].id = i+1+(this.currentPage -1)*this.pageSize;
          }
          if (sessionStorage.getItem("login")) {
            sessionStorage.removeItem("login");
          }
        }else {
          ElMessage.error('查询失败.')
        }
      })
      request.get("/table/get_table_num",{
        params:{
          url:"/progress?select=id,bool_work,bool_overwork,grasp,member_progress(year_week,ask_for_leave),member(name,group)",
        }
      }).then(res => {
        this.total = res.data
      })
    },
    // 时间搜索 1
    search_time() {
      if (!this.fanHuiShow) {
        this.fanHuiShow = true;
      }
      // 保存搜索前的数据
      this.oldTableData = this.tableData;
      request.get("/table/search_time",{
        params:{
          url:"/member_progress",
          time:this.searchTime,
          select: "year_week,ask_for_leave,progress(bool_work,bool_overwork,grasp,member(name,group))",
        }
      }).then(res => {
        if (res.code == "200") {
          this.total = res.data.length
          this.tableData = res.data
          // 从1开始给数据排序
          for (let i = 0; i < res.data.length; i++) {
            this.tableData[i].id = i+1+(this.currentPage -1)*this.pageSize;
          }
          ElMessage({
            message: '搜索成功.',
            type: 'success',
          })
        } else if (res.code == "400"){
          ElMessage.error('暂无数据')
        }
        else if (res.code == "load"){
          this.load()
        }
        else {
          ElMessage.error('搜索失败：'+res.msg)
        }
      })
      // 保存搜索后的数据
    },
    // 组别搜索 1
    search_group() {
      if (!this.fanHuiShow) {
        this.fanHuiShow = true;
      }
      request.get("/table/search",{
        params:{
          url:"/member",
          select:"name,group,member_progress(year_week,ask_for_leave,progress(bool_work,bool_overwork,grasp))",
          group:this.select,
        }
      }).then(res => {
        if (res.code == "200") {
          this.total = res.data.length
          this.tableData = res.data
          // 从1开始给数据排序
          for (let i = 0; i < res.data.length; i++) {
            this.tableData[i].id = i+1+(this.currentPage -1)*this.pageSize;
          }
          ElMessage({
            message: '搜索成功.',
            type: 'success',
          })
        } else if (res.code == "400"){
          ElMessage.error('暂无数据')
        }
        else if (res.code == "load"){
          this.load()
        }
        else {
          ElMessage.error('搜索失败：'+res.msg)
        }

      })
    },
    // 姓名搜索 1
    search_name() {
      if (!this.fanHuiShow) {
        this.fanHuiShow = true;
      }
      request.get("/table/search",{
        params:{
          url:"/member",
          name:this.search,
          select: "name,group,member_progress(year_week,ask_for_leave,progress(bool_work,bool_overwork,grasp))",
        }
      }).then(res => {
        if (res.code == "200") {
          this.total = res.data.length
          this.tableData = res.data
          // 从1开始给数据排序
          for (let i = 0; i < res.data.length; i++) {
            this.tableData[i].id = i+1+(this.currentPage -1)*this.pageSize;
          }
          ElMessage({
            message: '搜索成功.',
            type: 'success',
          })
        } else if (res.code == "400"){
          ElMessage.error('暂无数据')
        }
        else {
          ElMessage.error('搜索失败：'+res.msg)
        }

      })
    },
    //设置 每页 的 条数 1
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.pgload()
    },
    // 设置 查询 页码 1
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage,'当前页码')
      this.pgload()
    },
    // 成员详情跳转 1
    handleDetail(name) {
      // 依据成员姓名 获取成员id
      request.get("/table/getId_by_name",{
        params:{
          name: name,
        }
      }).then(res => {
        if (res.code == "200") {
          ElMessage({
            message: '跳转成功.',
            type: 'success',
          })
          this.$router.push({path: `/progress/${res.data}`})
        }else {
          ElMessage.error('跳转失败.')
        }
      })
    },
  },
  created() {
    this.pgload()
  },

}
</script>
<style>
.error {
  border-color: red;
}
</style>